<template>
  <div :id="id" style="height:150px;width: 150px"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Chart",
  props: {
    id: String,
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      localChartData: []
    };
  },
  mounted() {
    this.localChartData = this.chartData
    this.createChart()
  },
  methods:{
    createChart(){
      const _this = this;
      // 初始化Echarts
      const myChart = echarts.init(document.getElementById(this.id))
      // 设置饼图数据
      // let data = [
      //   {
      //     "value": 10,
      //     "name": "在 线"
      //   },
      //   {
      //     "value": 1,
      //     "name": "离线"
      //   }
      // ]
      //console.log(this.data)
      // 设置饼图样式
      const option = {
        title: {
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: _this.chartData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    watch: {
      chartData() {
        this.localChartData = this.chartData
        this.createChart()
      }
    }
  }
}

</script>

<style scoped>

</style>